@import '../../styles/index';
@calendar-prefix-cls: ~"@{ane-prefix}-calendar";

.@{calendar-prefix-cls} {
    table {
        width: 100%;
        max-width: 100%;
    }

    &-column-header {
        line-height: 18px;
        width: 33px;
        padding: 6px 0;
        text-align: center;
    }
    &-cell {
        padding: 4px 0;
    }
    &-prev-month-cell &-date, &-next-month-cell &-date {
        color: @calendar-disabled-date-color;
    }
    &-today &-date {
        border-color: @brand-primary;
        font-weight: 700;
        color: @brand-primary;
    }
    &-selected-day &-date {
        background: @brand-primary;
        color: #fff;
        border: 1px solid transparent;

        &:hover {
            background: @brand-primary;
        }
    }
    &-disabled-cell &-date {
        cursor: not-allowed;
        color: @calendar-disabled-date-color;
        background: @calendar-disabled-date-bg;
        border-radius: 0;
        width: auto;
        border: 1px solid transparent;

        &:hover {
            background: @calendar-disabled-date-bg;
        }
    }
    &-date {
        display: block;
        margin: 0 auto;
        color: @text-color;
        border-radius: 2px;
        width: 20px;
        height: 20px;
        line-height: 18px;
        border: 1px solid transparent;
        padding: 0;
        background: transparent;
        text-align: center;
        cursor: pointer;

        &:hover {
            background: @item-hover-bg;
        }
    }

    &-year-view {
        table-layout: fixed;
        text-align: center;
    }
    &-year-view &-cell {
        padding: 20px 0;
    }
    &-year-view &-date {
        width: auto;
        display: inline-block;
        padding: 0 6px;
        white-space: nowrap;
    }
}